import {useRef,useEffect} from 'react';
import * as eCharts from 'echarts';
const ChartDemo = () =>{
    let eChartsRef = useRef()//唯一的元素
    console.log(eChartsRef);
    useEffect(() =>{
        console.log('*********');
        console.log(eChartsRef);
        const myChart = eCharts.init(eChartsRef.current);
        let option = {
            title:{
                text:'Echarts入门实例'
            },
            tooltip:{},
            legend:{
                data:["销量"]
            },
            xAxis:{
                data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis:{},
            series:[
                {
                    name:"销量",
                    type:"bar",
                    data:[5,20,36,10,10,20]
                }
            ]
        }
        myChart.setOption(option)
    },[])//
    return(
        //不要dom
        <div ref={eChartsRef} style={{
            width:600,
            height:400,
            margin:100,
            backgroundColor: 'seashell'
        }}>
            
        </div>
    )
}
export default ChartDemo